<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	template="/WEB-INF/esquema/plantillasimple.xhtml">

	<ui:define name="body">
		<style type="text/css">
			.olControlPanel {
				float: right;
				right: 0px;
				height: 30px;
			}
			.olControlPanel div {
				float: right;
				display:block;
				width:  24px;
				height: 24px;
				margin: 5px;
				background-color:red;
			}

			.olControlPanel .olControlNavigationItemActive {
				background-color: blue;
				background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/pan_on.png");
			}
			.olControlPanel .olControlNavigationItemInactive {
				background-color: orange;
				background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/pan_off.png");
			}
            .olControlPanel .olControlDrawFeatureItemActive {
                width:  22px;
                height: 22px;
                background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/draw_line_on.png");
            }
			.olControlPanel .olControlDrawFeatureItemInactive {
				width:  22px;
				height: 22px;
				background-image: url("http://www.openlayers.org/api/2.10/theme/default/img/draw_line_off.png");
			}
			.olControlPanel .olControlZoomBoxItemInactive {
				width:  22px;
				height: 22px;
				background-color: orange;
				background-image: url("http://www.openlayers.org/api/2.10/img/drag-rectangle-off.png");
			}
            .olControlPanel .olControlZoomBoxItemActive {
				width:  22px;
				height: 22px;
				background-color: blue;
				background-image: url("http://www.openlayers.org/api/2.10/img/drag-rectangle-on.png");
            }
            .olControlPanel .olControlZoomToMaxExtentItemInactive {
				width:  18px;
				height: 18px;
				background-image: url("http://www.openlayers.org/api/2.10/img/zoom-world-mini.png");
            }
			.alignTop {
				vertical-align:top;
			}
			.rich-filter-input {
				width: 50px;
			}
			.rich-spinner-input {
				width: 30px;
			}
        </style>
        <a4j:loadScript src="http://localhost:8080/openlayers/OpenLayers.js"/>
		<h:form>
			ESTO ES EL TOOLBAR
			<m:map id="mapViewer" width="100%" height="450px" options="" jsVariable="mapViewer">
				<m:wmsLayer name="Centroides de predio" params="{layers: 'omoa:centroides_predio', transparent: true, format: 'image/png'}" url="http://localhost:8080/geoserver/wms" options="{ projection: 'EPSG:32616' }"/>
				<m:wmsLayer name="Predios Omoa" url="http://localhost:8080/geoserver/wms" params="{layers: 'omoa:predios'}" options="{ projection: 'EPSG:32616', isBaseLayer: true }"/>
				<m:wmsLayer name="Bloques" params="{layers: 'omoa:bloques', transparent: true, format: 'image/png'}" url="http://localhost:8080/geoserver/wms" options="{ projection: 'EPSG:32616', isBaseLayer: false }"/>
				<m:wmsLayer name="Edificaciones" params="{layers: 'omoa:edificaciones', transparent: true, format: 'image/png'}" url="http://localhost:8080/geoserver/wms" options="{ projection: 'EPSG:32616', isBaseLayer: false }"/>
				<m:navigationControl />
				<m:panZoomBarControl />
				<m:layerSwitcherControl options="{ascending:false}"/>
				<m:scaleLineControl />
				<m:mousePositionControl />
				<m:overviewMapControl />
				<m:panelControl>
					<m:navigationControl options="{title:'#{messages['map.navigation']}'}" />
					<m:zoomBoxControl options="{title:'#{messages['map.zoom_box']}'}" />
					<m:zoomToMaxExtentControl options="{title:'#{messages['map.zoom_to_max_extent']}'}" />
					<m:drawFeatureControl layer="vlayer" handler="OpenLayers.Handler.Path" options="{title:'Draw a feature'}" />
				</m:panelControl>
				<m:script></m:script>
			</m:map>
		
			<a4j:jsFunction name="test" action="#{mapViewerHelper.test}"/>
		</h:form>
	</ui:define>

</ui:composition>
